<template>
    <div class="print">
        <div class="print_menu">
            <div class="menu_go_back" @click="go_back"></div>
            <div class="menu_name"></div>
            <div class="menu_manage" @click="clear">清除</div>
        </div> 
        <div class="have" v-if="have">
            <div class="print_list">
                <div class="list" v-for="(item, index) in goods" :key="index">
                    <div class="print_date" v-text="item.date"></div>
                    <ul>                      
                        <li v-for="(items, index) in item.info" :key="index">
                            <router-link :to="{path:'/detail',query:{id:items.item_id}}"> 
                                <div class="print_img">
                                    <img :src="items.pict_url">
                                </div>
                                <div class="print_info">
                                    <div class="print_title" v-text="items.item_title"></div>
                                    <div class="print_price"><small>¥</small>{{items.zk_final_price}}</div>
                                    <div class="print_quan"><span class="num" v-text="items.coupon_money"></span>元券</div>
                                </div>
                            </router-link>   
                        </li>                                           
                    </ul>
                </div>  
                <div v-if="load" class="loader">正在加载中...</div>  
                <div v-if="bottom" class="bottom">已经到底啦</div>
            </div>
            <temp_top></temp_top> 
        </div>
        <div class="nohave" v-if="nohave">
            <div class="null">
                <img src="/static/picture/print.png">
            </div>
            <div class="text">您还没有浏览记录哦！</div>
            <router-link to="/"><div class="go">去逛逛</div></router-link>
        </div>        
    </div>
</template>
<script>
import  temp_top from './common.vue'
    export default {
        name: 'Print',
        data () {
             return {
                 token:"",  
                 page:1,
                 limit:20, 
                 goods:"",
                 blast:"",
                 load:false,
                 bottom:false,
                 nohave:false,
                 have:true,
             }
        },
        methods:{
            go_back(){
                this.$router.go(-1);
            },
            clear(){
                if(this.nohave){
                    Toast("没有数据要清除");
                    return;
                }
                 MessageBox({
                    title: '提示',
                    message: '确定要清除吗?',
                    showCancelButton: true
                }).then(action => {
                    if(action == 'confirm'){
                        this.$axios({
                            url:'/v1/user/clearUserViews',
                            method: 'post',
                            headers:{
                            'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                            'Authorization':"bearer "+this.token
                            }
                        }).then(res => {
                                if(res.data.code==200){
                                    this.have=false;
                                    this.nohave=true;
                                }else{
                                    Toast(res.data.msg);
                                }    
                        }, res => {
                            console.log("error");
                        }); 
                    }
                })             
            },
            scroll(goods) {
                let flag = false;
                window.onscroll = () => {
                    let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
                    let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度
                    let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度
                    let bottomOfWindow =top + vh >= height;
                    if(bottomOfWindow&&flag==false){
                        flag=true;
                        this.page++;
                            var that = this;
                            that.load=true;
                            var params = {
                                    page: that.page,
                                    limit:that.limit,
                            }
                            this.$axios.get( //传参发起请求
                                '/v1/user/getUserViews', {
                                    params,
                                    headers:{
                                        'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                                        'Authorization':"bearer "+that.token
                                    }
                                }
                            ).then(function (response) { //接口返回数据
                            var data=response.data.data.list;
                                if(data.length<=0){
                                    that.bottom=true;
                                    that.load=false;
                                }else{
                                    if(goods[goods.length-1].date==data[0].date){
                                        for(var i =0;i<data[0].info.length;i++){
                                            goods[goods.length-1].info.push(data[0].info[i]);
                                        }; 
                                    }
                                    for(var i =1;i<data.length;i++){
                                        goods.push(data[i]);
                                    };
                                   
                                    that.load=false;
                                    flag=false;
                                }

                            }, response => {
                                console.log("error");
                            });
                        }
                }
            },                
        },
        created(){
            document.title="我的足迹";
            if (localStorage.token) {
                this.token=localStorage.getItem('token');
            }
            this.$axios.get("/v1/user/getUserViews",{
                    params:{
                        page:this.page,
                        limit:this.limit,
                    },
                    headers:{
                        'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                        'Authorization':"bearer "+this.token
                    }
                }).then(res => {
                if(res.data.code==200){
                    var data=res.data.data.list;
                    if(data.length<=0){
                        this.have=false;
                        this.nohave=true;
                    }else{
                        this.have=true;
                        this.nohave=false;
                    }
                    this.goods=data;
                    // this.blast=data[data.length-1].date;
                    this.scroll(this.goods);
                }else{
                   Toast(res.data.msg)
                }    
            }, res => {
                console.log("error");
            });
        },
        components:{
            "temp_top":temp_top,
        },
    }
</script>
<style scoped>     
.print_menu{width:100%;height:98px;line-height:98px;background:#F8F8F8;display: flex;flex-wrap: wrap;justify-content:space-between;justify-items: center;text-align: justify;}
.print_menu .menu_go_back{width:48px;height:48px;background:url(/static/images/team_go_back.png) no-repeat left center;background-size:100% 100%;margin-left:2%;margin-top:24px;}
.print_menu .menu_name{font-size:32px;color:#333334;font-weight:600;}
.print_menu .menu_manage{font-size:32px;color:#333334;margin-right:26px;}
.print_list{padding-top:4px;}
.print_list .print_date{color:#C6C6C6;font-size:28px;line-height:80px;margin-left:36px;}
.print_list ul{width:698px;margin:0 auto;display: flex;justify-content:space-between;flex-wrap: wrap;}
.print_list ul a{text-decoration: none;}
.print_list li{width:340px;border:2px solid #E4E4E4;border-radius:40px 40px 24px 40px;margin-bottom:26px;}
.print_list .print_img{width:340px;height:340px;}
.print_list .print_img img{width:100%;height:100%;border-radius:40px 40px 0 0;}
.print_list .print_title{font-size:28px;color:#000000;margin-top:24px;line-height:40px;padding-left:10px;height:80px;overflow: hidden;}
.print_list .print_price{color:#FE3B30;font-size:36px;font-weight:600;margin-top:26px;padding-left:10px;}
.print_list .print_price small{font-weight:normal;margin-right:4px;}
.print_list .print_quan{width:144px;height:60px;background:#FFE514;text-align:center;line-height:60px;color: #333334;font-size:24px;font-weight:500;border-radius:24px 0 24px 0;margin-left:auto;}
.print_list .print_quan .num{font-size:32px;font-weight:500;margin-right:8px;}
.loader{font-size:24px;line-height:80px;text-align: center;width:100%;}
.bottom{font-size:24px;line-height:80px;text-align: center;width:100%;}
.nohave{width:100%;}
.null{width:456px;height:420px;margin:0 auto;margin-top:212px;}
.null img{width:100%;}
.text{font-size:28px;color:#9B9B9B;text-align: center;margin-top:28px;margin-bottom:28px;}
.go{width:216px;height:80px;background:#FFE514;font-size:28px;color:#000000;line-height:80px;text-align:center;border-radius:40px;margin:0 auto;}
</style>
